<template>
  <div>
    <!-- <div id="chatPage">{{ stat.messageList }}</div> -->
    <div id="chat">
      <div class="chat">
        <!--header-->
        <header class="header">
          <span class="title">{{stat.currentUserInfo.wechatName}}</span>
        </header>
        <!--header-->

        <!--chat-content-->
        <div class="chat-content">
          <div class="message-wrapper">
            <div
              class="message-item"
              v-for="(msg,index) in stat.messageList"
              :key="index"
              :class="[msg.messageDirection == 1 ? 'my-msg' : 'your-msg']"
            >
              <div v-if="msg.messageType == 'TextMessage'" class="message-text">
                <div class="rong-avatar">
                  <img
                    v-if="msg.messageDirection == 1"
                    :src="stat.targetUserInfo.rongLogo"
                    class="rong-avatar-bd"
                  />
                  <img v-else :src="stat.currentUserInfo.rongLogo" class="rong-avatar-bd" />
                </div>
                <div class="message-body">
                  <pre class="user-msg" v-if="msg.content.messageName == 'TextMessage'">{{msg.content.content}}</pre>
                  <img
                    class="image-message"
                    :src="msg.content.imageUri"
                    alt="image"
                    v-if="msg.content.messageName == 'ImageMessage'"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--chat-content-->

        <!--footer-->
        <footer class="footer">
          <div class="message-wrap">
            <textarea
              v-model="stat.sendMsgVal"
              id="message-content"
              placeholder="请输入文字..."
              class="message-content"
            ></textarea>
          </div>
          <span class="send-btn" @click="sendMsg">发送</span>
        </footer>
        <!--footer-->
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/chat.css";
import init from "@/assets/rongyun/init";
export default {
  name: "chat",
  props: ["data"],
  data() {
    return {
      instance: "",
      stat: {
        currentView: "chat",
        currentUserInfo: this.data,
        targetUserInfo: {
          rongLogo:
            "http://101.36.181.66:8083/xiaopu/000000/pictures/credential/0ec1a397-b5ad-44f9-90ad-b1d7d9738a922.jpg"
        },
        messageList: [],
        sendMsgVal: ""
      },
      rongData: {
        rongName: "测试tu1",
        rongLogo:
          "http://101.36.181.66:8083/xiaopu/000000/pictures/credential/0ec1a397-b5ad-44f9-90ad-b1d7d9738a922.jpg",
        time: ""
      }
    };
  },
  mounted() {
    var _this = this;
    var userInfo = {
      appKey: "c9kqb3rdc4gpj", // 融云的appkey
      token:
        "6QGOG5uYJdPhNH3xw8OoheO0HRxOy+tUb9vq5Bql+Tx837pGrs6nFszsvbmG5Bg56omwcTRyz8UsmwlJLqhWxg=="// 你使用的用户token
    };
    var callbacks = {
      CONNECTED: function(instance) {
        //传入实例参数
        //获取历史消息
        var conversationType = RongIMLib.ConversationType.PRIVATE;
        var targetId = "2564649";
        instance.getHistoryMessages(
          conversationType,
          targetId,
          null,
          20,
          {
            onSuccess(list, hasMsg) {
              console.log(list)
              //渲染会话列表
              _this.stat.messageList = list;
              return (_this.instance = instance);
            }
          },
          null
        );
      },
      Success: function(id) {},
      Received: function(message) {
        _this.stat.messageList.push(message); // 把对方的信息添加到历史消息数组中
        _this.$nextTick(that.scrollEnd); // 添加完消息 跳转到最后一条
      }
    };
    init(userInfo, callbacks);

    this.scrollEnd();
    this.rongData.time = moment().format("YYYY年MM月DD日 HH:mm");
  },
  methods: {
    // 点击发送触发事件
    sendMsg() {
      var text = this.stat.sendMsgVal;
      if (!text) {
        return false;
      }
      var msg = new RongIMLib.TextMessage({
        content: text,
        extra: this.rongData
      });
      var conversationType = RongIMLib.ConversationType.PRIVATE; // 私聊
      var targetId = "2564649"; // 目标 Id
      var that = this;
      that.instance.sendMessage(conversationType, targetId, msg, {
        // 发送消息成功
        onSuccess: function(message) {
          that.stat.sendMsgVal = ""; // 清空内容
          that.stat.messageList.push(message); // 把自己发送的消息添加到消息列表中
          that.$nextTick(that.scrollEnd); // 添加完消息 跳转到最后一条
        }
      });
    },
    scrollEnd: function() {
      //添加完消息 跳转到最后一条
      var list = document.querySelectorAll(".message-item");
      if (list.length > 1) {
        var last = list[list.length - 1];
        last.scrollIntoView();
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
